import Taro, { Config } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTabBar } from "taro-ui";
import Index from "./index";
import Find from "./find/find";
import My from "./my/my";
import Message from "./message/message";

interface IState {
    value: string;
    current: number
}

export default class Main extends Taro.Component {

    /**
     * 指定config的类型声明为: Taro.Config
     *
     * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
     * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
     * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
     */
    config: Config = {
        navigationBarTitleText: 'Travel'
    };

    state = {
        value: '',
        current: 0
    } as IState;
    main;

    constructor() {
        super();
        this.state = {
            value: '',
            current: 0
        };
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillUnmount() {
    }

    componentDidShow() {
    }

    componentDidHide() {
    }

    onChange = (value) => {
        this.setState({
            value: value
        })
    };

    onActionClick = () => {
        console.log('开始搜索')
    };

    handleClick = (value) => {
        if (2 !== value) {
            this.setState({
                current: value
            });
        }
        // CommonFunction.tabBarClick(value);
    };

    render() {
        return (
            <View>
                <View style={{'padding': '0 0 115px 0'}}>
                    {{
                        [0]: <Index/>,
                        [1]: <Find/>,
                        [3]: <Message/>,
                        [4]: <My/>,
                    }[this.state.current]}
                </View>
                <AtTabBar
                    fixed
                    tabList={[
                        {title: '首页', iconType: 'home'},
                        {title: '发现', iconType: 'streaming', text: 'new'},
                        {title: '', iconType: 'add'},
                        {title: '消息暂时', iconType: 'message', text: '100', max: 99},
                        {title: '我的', iconType: 'user'}
                    ]}
                    onClick={this.handleClick.bind(this)}
                    current={this.state.current}
                />
            </View>
        )
    }
}
